<template>
    <section>
          <ul class="header-nav">
    <router-link to="/news/405">
      <li :class="nowArea=='xue'?'active':''" @click="changeArea('xue')">学院新闻</li>
    </router-link>
    <router-link to="/news/406">
      <li :class="nowArea=='dang'?'active':''" @click="changeArea('dang')">党建动态</li>
    </router-link>
    <router-link to="/news/407">
      <li :class="nowArea=='tong'?'active':''" @click="changeArea('tong')">通知公告</li>
    </router-link>
    <router-link to="/news/408">
      <li :class="nowArea=='fen'?'active':''" @click="changeArea('fen')">分院动态</li>
    </router-link>
  </ul>
  <news-list v-for="item in listdata" :key="item.t_content_pk" :modelValue="item"></news-list>
</section>

</template>

<script lang="ts" setup>
import NewsList from "@/components/news-list.vue"
import { ref, watch } from "vue";
import { defineProps } from "vue";
import ajax from "@/util/request";
const nowArea=ref("xue");
const listdata=ref([]);
const props = defineProps({
  id: {
    type: String,
  },
});
watch(() => props.id,(newVal) => {
    ajax("content/queryList",{t_cat_plant_fk: newVal,rows: 30}).then((res)=>{
        // console.log(res);
        
        if(res.data.status>0){
            listdata.value=res.data.result_data
        }
    })
  },
  {immediate:true}
);
function changeArea(now:any){
nowArea.value=now
}
</script>

<style>
.header-nav {
  display: flex;
}
.h2 {
  margin-left: 16rpx;
}
.active {
  color: var(--base-color);
}
</style>